<template>
	<view class="menus">
		<view v-for="(item, index) in list" :key="index" @click="selectMenu(item)" class="item">
			<image v-if="imgIcon" :src="item.icon" mode="scaleToFill" class="imgIcon"></image>
			<icon v-else type="none" :class="['iconfont', item.icon, 'icon']"></icon>
			<text class="name">{{item.name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"menu-list",
		props: {
			imgIcon: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			selectMenu(item){
				console.log(item);
			}
		}
	}
</script>

<style lang="scss">
.menus{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-gap: 20rpx;
	.item{
		display: flex;
		flex-direction: column;
		align-items: center;
		.imgIcon{
			width: 66%;
		}
		.icon{
			font-size: 60rpx;
			color: $xj-theme;
		}
		.name{
			margin-top: 10rpx;
			color: $xj-text-normal;
			font-size: 28rpx;
			line-height: 32rpx;
			text-align: center;
		}
	}
}
</style>
